<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>

<body>
    <div id="app" class="demo">
       
    </div>

</body>
<script>

    const HelloVueApp = {
        name: 'app',
        // 在 composition API 中 created 和 beforCreated 被 setup 函数替代，其它钩子均可引入使用
        setup() {
            console.log('创建前')
            Vue.onBeforeMount(() => {
                console.log('挂在前')
            })
            Vue.onMounted(() => {
                console.log('挂在后')
            })
            Vue.onBeforeUpdate(() => {
                console.log('更新前')
            })
            Vue.onUpdated(() => {
                console.log('更新后')
            })
            Vue.onActivated(() => {
                console.log('动态渲染')
            })
            Vue.onDeactivated(() => {
                console.log('隐藏')
            })
        }
    }
    Vue.createApp(HelloVueApp).mount('#app')
</script>

</html>